<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Vue 开发环境的搭建 | 大虾技术博客「大虾技术博客」</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="Daheaths" />
<meta name="designer" content="Daheaths" />
<meta name="rating" content="general" /> 

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="robots" content="index, follow" />


<meta baidu-gxt-verify-token="2b74a5aea155a215abea8547f929190c" />


<!-- keywords -->
<meta name="keywords" content="Vue,全栈开发"/>
<!-- Canonical links -->
<link rel="canonical" href="http：www.vovteam.com/2017/08/26/2016-12-26-Vue-开发环境的搭建/index.html">

<!-- Alternative links -->


<!-- Icon -->

<link rel="icon" type="image/png" href="/img/favicon-16x16.png">


<meta name="msapplication-TileColor" content="#2f83cd">
<meta name="msapplication-TileImage" content="/img/mstile-144x144.png">

<!--open.weibo.com-->
<meta property="wb:webmaster" content="a1686eb81db284d5" />

<!--wechat shares meta-->


<!-- Prefetch -->







<!-- CSS -->
<link rel="stylesheet" href="/css/style.css">



<!-- RSS -->
<link rel="alternate" href="/atom.xml" title="大虾技术博客">
<!-- Open Graph -->
<meta name="description" content="前言 选择你所喜欢的，爱你所选择的–列夫·托尔斯泰  大虾技术博客#引用Vue官网的介绍 Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为">
<meta name="keywords" content="Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue 开发环境的搭建">
<meta property="og:url" content="http：www.vovteam.com/2017/08/26/2016-12-26-Vue-开发环境的搭建/index.html">
<meta property="og:site_name" content="大虾技术博客">
<meta property="og:description" content="前言 选择你所喜欢的，爱你所选择的–列夫·托尔斯泰  大虾技术博客#引用Vue官网的介绍 Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为">
<meta property="og:image" content="/img/post/img/clipboard.png">
<meta property="og:image" content="/img/post/img/npmvuecli.png">
<meta property="og:image" content="/img/post/img/vuewebpack.png">
<meta property="og:image" content="/img/post/img/70629015239.png">
<meta property="og:image" content="/img/post/img/9015807.png">
<meta property="og:image" content="/img/post/img/51.png">
<meta property="og:image" content="/img/post/img/Q057.png">
<meta property="og:updated_time" content="2017-08-26T03:17:06.067Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue 开发环境的搭建">
<meta name="twitter:description" content="前言 选择你所喜欢的，爱你所选择的–列夫·托尔斯泰  大虾技术博客#引用Vue官网的介绍 Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为">
<meta name="twitter:image" content="/img/post/img/clipboard.png">
<meta name="twitter:site" content="Daheaths">

<script>
    var App = {
        root:'/',
        isHome: false,
        isCate: false,
        isTag: false  
    };
</script>



</head>
<body class="page-post-detail">

    
        <div class="mod-hd">
    <div class="grid">
        <!--导航栏Mobile start-->
        <span class="mod-hd-toggle" id="J_hdToggle"><i class="fa fa-bars"></i></span>
        <!--导航栏Mobile end-->
        <div class="mod-hd-main">
            <div class="mod-hd-inner">
                <nav class="mod-nav">
                    <ul class="mod-nav-list">
                        <li class="main-nav-item"><a href="/index.html" class="main-nav-link">博文</a></li><li class="main-nav-item"><a target="_blank" href="https://github.com/" class="main-nav-link">github</a></li><li class="main-nav-item"><a href="/about/" class="main-nav-link">关于</a></li>
                    </ul>
                </nav>
              <!--  <div class="mod-search" id="J_search">
                    <a class="mod-search-ico" id="J_searchTrigger" title="搜索">
                        <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                        <svg t="1498465834396" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M400.085333 753.265778c-192.128 0-348.444444-156.302222-348.444444-348.430222 0-192.142222 156.316444-348.444444 348.444444-348.444444 192.142222 0 348.444444 156.302222 348.444444 348.444444C748.544 596.963556 592.241778 753.265778 400.085333 753.265778zM400.085333 113.28c-160.768 0-291.555556 130.787556-291.555556 291.555556s130.787556 291.541333 291.555556 291.541333c160.753778 0 291.555556-130.773333 291.555556-291.541333S560.853333 113.28 400.085333 113.28z" p-id="3157" fill="#B5B5B5"></path><path d="M194.104889 296.974222c-2.474667 0-4.977778-0.64-7.253333-2.005333-6.755556-3.996444-8.974222-12.743111-4.963556-19.484444 45.525333-76.657778 129.137778-124.273778 218.197333-124.273778 7.864889 0 14.222222 6.357333 14.222222 14.222222s-6.357333 14.222222-14.222222 14.222222c-79.075556 0-153.301333 42.296889-193.735111 110.364444C203.690667 294.499556 198.968889 296.974222 194.104889 296.974222z" p-id="3158" fill="#B5B5B5"></path><path d="M160.682667 410.723556c-7.850667 0-14.222222-6.357333-14.222222-14.222222 0-20.195556 2.403556-31.445333 6.656-49.592889 1.792-7.651556 9.443556-12.373333 17.080889-10.609778 7.651556 1.792 12.401778 9.429333 10.609778 17.080889-3.982222 17.038222-5.902222 25.984-5.902222 43.121778C174.904889 404.366222 168.547556 410.723556 160.682667 410.723556z" p-id="3159" fill="#B5B5B5"></path><path d="M887.04 967.608889c-22.812444 0-44.216889-8.860444-60.359111-24.974222L597.12 713.045333c-17.806222-17.806222-23.665778-39.808-16.526222-61.966222 5.831111-18.033778 19.498667-33.251556 30.748444-44.472889 16.668444-16.668444 37.162667-33.720889 62.890667-33.720889 10.965333 0 27.448889 3.384889 43.562667 19.498667l229.589333 229.560889c16.113778 16.142222 24.974222 37.560889 24.974222 60.359111 0 22.784-8.860444 44.216889-24.974222 60.330667C931.242667 958.748444 909.824 967.608889 887.04 967.608889zM634.510222 669.525333c0.085333 0 0.839111 1.336889 2.830222 3.299556l229.560889 229.589333c10.752 10.723556 29.496889 10.723556 40.248889 0 5.361778-5.390222 8.305778-12.529778 8.305778-20.110222 0-7.608889-2.944-14.748444-8.334222-20.138667L677.575111 632.604444c-2.033778-2.033778-3.356444-2.773333-3.726222-2.887111-0.199111 0.113778-6.058667 0.867556-22.272 17.109333C635.320889 663.054222 634.538667 668.913778 634.510222 669.525333L634.510222 669.525333z" p-id="3160" fill="#B5B5B5"></path></svg>
                    </a>
                    <form id="J_searchForm" method="get" class="mod-search-form" action="/search/">
                        <input type="text" name="query" class="mod-search-ipt" id="J_searchInput" placeholder="搜索" />
                    </form>
                </div> -->
            </div>
        </div>
    </div>
</div>

    

	
    <div class="mod-container">
        <div class="grid">
            <div class="mod-main typo">
                
                <!-- 文章详情页 -->
<article class="post">
    <div class="post-cover"><img src="/img/post/img/lewis-ngugi-186309.jpg" alt="Vue 开发环境的搭建" /></div>
    <header class="post-hd">
        
        <h1 class="post-tit">Vue 开发环境的搭建</h1>
        <div class="post-meta">
            by <a target="_blank" href="https://github.com/Daheaths" class="post-author">Daheaths</a> on <span>2017-08-26</span>
        </div>
        
        <p class="post-subtit" style="display:none;"><i class="fa fa-quote-left"></i>Vue 是一个简单易学的框架，国内的大部分公司都开始使用 Vue 来做开发，来学习一下Vue吧！</p>
        
        <span style="display:none;" id="busuanzi_value_page_pv"></span>
    </header>
    <div class="post-content">
        <h2 id="前言" class="post-heading"><a href="#前言" class="headerlink" title="前言"></a>前言<a class="post-anchor" href="#前言" aria-hidden="true"></a></h2><blockquote>
<p>选择你所喜欢的，爱你所选择的–列夫·托尔斯泰</p>
</blockquote>
<h3 id="大虾技术博客" class="post-heading"><a href="#大虾技术博客" class="headerlink" title="大虾技术博客"></a>大虾技术博客<a class="post-anchor" href="#大虾技术博客" aria-hidden="true"></a></h3><h4 id="引用Vue官网的介绍" class="post-heading"><a href="#引用Vue官网的介绍" class="headerlink" title="#引用Vue官网的介绍"></a>#引用Vue官网的介绍<a class="post-anchor" href="#引用Vue官网的介绍" aria-hidden="true"></a></h4><ul>
<li>Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。</li>
</ul>
<h4 id="兼容性" class="post-heading"><a href="#兼容性" class="headerlink" title="#兼容性"></a>#兼容性<a class="post-anchor" href="#兼容性" aria-hidden="true"></a></h4><ul>
<li>Vue.js 不支持IE8及以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 <a href="http://caniuse.com/#feat=es5" target="_blank" rel="external">ECMAScript 5 的浏览器</a></li>
</ul>
<h4 id="独立版本" class="post-heading"><a href="#独立版本" class="headerlink" title="#独立版本"></a>#独立版本<a class="post-anchor" href="#独立版本" aria-hidden="true"></a></h4><p>直接下载并用&lt; script &gt;标签引入，Vue 会被注册为一个全局变量。<strong>重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告</strong>。</p>
<h4 id="NPM" class="post-heading"><a href="#NPM" class="headerlink" title="#NPM"></a>#NPM<a class="post-anchor" href="#NPM" aria-hidden="true"></a></h4><p>①Windows OS下直接下载 Ndoe 安装包<a href="https://nodejs.org/en/download/" target="_blank" rel="external">Node 下载路径</a>，Node安装完成</p>
<h5 id="②获取Nodejs模块安装目录访问权限" class="post-heading"><a href="#②获取Nodejs模块安装目录访问权限" class="headerlink" title="②获取Nodejs模块安装目录访问权限"></a>②获取Nodejs模块安装目录访问权限<a class="post-anchor" href="#②获取Nodejs模块安装目录访问权限" aria-hidden="true"></a></h5><blockquote>
<p>sudo chmod -R 777 /usr/local/lib/node_modules/</p>
</blockquote>
<h5 id="③安装淘宝镜像" class="post-heading"><a href="#③安装淘宝镜像" class="headerlink" title="③安装淘宝镜像"></a>③安装淘宝镜像<a class="post-anchor" href="#③安装淘宝镜像" aria-hidden="true"></a></h5><blockquote>
<p>$ npm install -g cnpm –registry=<a href="https://registry.npm.taobao.org" target="_blank" rel="external">https://registry.npm.taobao.org</a></p>
</blockquote>
<p>详细可查询淘宝镜像：<a href="http://npm.taobao.org/" target="_blank" rel="external">http://npm.taobao.org/</a></p>
<p><img src="/img/post/img/clipboard.png" alt="vue"><br><strong>注意：建议不要使用国内镜像，会导致部分依赖丢失！！！，直接使用 npm （由于镜像在国外，下载会慢些）</strong></p>
<h5 id="④全局安装开发Vue-cli" class="post-heading"><a href="#④全局安装开发Vue-cli" class="headerlink" title="④全局安装开发Vue-cli"></a>④全局安装开发Vue-cli<a class="post-anchor" href="#④全局安装开发Vue-cli" aria-hidden="true"></a></h5><blockquote>
<p>$npm install -g vue-cli （也可写为：$ npm install –global vue-cli）<br><img src="/img/post/img/npmvuecli.png" alt="vue"></p>
</blockquote>
<h5 id="⑤安装基于webpack的开发模板" class="post-heading"><a href="#⑤安装基于webpack的开发模板" class="headerlink" title="⑤安装基于webpack的开发模板"></a>⑤安装基于webpack的开发模板<a class="post-anchor" href="#⑤安装基于webpack的开发模板" aria-hidden="true"></a></h5><blockquote>
<p>$ vue init webpack my-first-vue-project&lt;模板名称不能为中文&gt;</p>
</blockquote>
<p><img src="/img/post/img/vuewebpack.png" alt="vue"></p>
<p>模板下载完成，需要设置开发模板：<br>？Project name(my-first-vue-project) &lt;项目名称，不能为中文&gt;<br>？Projec descripiton (A Vue.js project) &lt;项目描述&gt;<br>？ Author &lt;作者，不能为中文&gt;<br>？ Use ESLint to lint your code?(Y/N) &lt;语法检查工具&gt;<br>？ Setup unit test with Karma + Mocha? (Y/N) &lt;单元测试&gt;<br>？ Setup e2e tests with Nightwatch？&lt; NodeJS 验收测试框架&gt;<br>？ 路由等等…</p>
<h5 id="⑥安装依赖项" class="post-heading"><a href="#⑥安装依赖项" class="headerlink" title="⑥安装依赖项"></a>⑥安装依赖项<a class="post-anchor" href="#⑥安装依赖项" aria-hidden="true"></a></h5><ul>
<li>进入刚才创建的模板目录 my-first-vue-project<br><img src="/img/post/img/70629015239.png" alt="vue"><br>敲入指令：<blockquote>
<p>npm install</p>
</blockquote>
</li>
</ul>
<p><img src="/img/post/img/9015807.png" alt="vue"></p>
<h5 id="⑦运行" class="post-heading"><a href="#⑦运行" class="headerlink" title="⑦运行"></a>⑦运行<a class="post-anchor" href="#⑦运行" aria-hidden="true"></a></h5><blockquote>
<p>npm run dev</p>
</blockquote>
<p><img src="/img/post/img/51.png" alt="vue"></p>
<p>开启后效果：<br><img src="/img/post/img/Q057.png" alt="vue"></p>


        <div class="post-tags" style="display: none">
            
                
                    <a href="/tags/Vue/">Vue</a>
                
            
        </div>

        <div class="post-categories" style="display: none">
            
                
                    <a href="/cates/Vue/">Vue</a>
                
            
        </div>

        
        <div class="post-announce">感谢您的阅读，本文由 <a href="http://www.vovteam.com">大虾技术博客</a> 版权所有。如若转载，请注明出处：大虾技术博客（<a href="http://www.vovteam.com/2017/08/26/2016-12-26-Vue-开发环境的搭建/">http://www.vovteam.com/2017/08/26/2016-12-26-Vue-开发环境的搭建/</a>）</div> 
        
        <div class="post-revision">
            <i class="fa fa-clock-o"></i> <time class="post-updated" datetime="2017-08-26T03:17:06.067Z">上次更新：2017-08-26 11:17:06</time>
         </div>

    </div>
    <!--控制上一篇和下一篇-->
    
<div class="post-nav">
    
    <div class="post-nav-next"><a href="/2017/08/26/2016-5-4-Audio-之深入理解/" title="Audio 之深入理解(上)">Audio 之深入理解(上) <i class="fa fa-chevron-right"></i></a></div>
    
    
</div>


    

</article>
            </div>
        </div>
    </div>


    
       <div class="mod-backtop" id="backTop"><i class="fa fa-long-arrow-up"></i></div>
    

    
        <footer class="mod-ft" id="footer">
    <div class="grid">
            <div class="mod-ft-sec mod-ft-copyright">
                <p>Copyright &copy; 2017. All Rights Reserved.</p>
            </div>

            

        </div>
</footer>

<!-- Scripts -->
<!-- build:js /js/bundle/core.js -->
<script src="/js/libs/debounce.js"></script>
<script src="/js/libs/jquery.js"></script>
<script src="/js/libs/jquery.scrollPager.js"></script>
<script src="/js/libs/hogan-3.0.2.js"></script>
<script src="/js/libs/base64.js"></script>
<script src="/js/libs/gitment.browser.js"></script>
<script src="/js/mods/util.js"></script>
<script src="/js/mods/common.js"></script>
<script src="/js/mods/console.js"></script>
<script src="/js/mods/scrollPager.js"></script>
<script src="/js/mods/jweixin-1.0.0.js"></script>
<!-- endbuild -->

    

    
<script src="/js/post_wx_share.js"></script>


    
        




<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>




<script type="text/javascript" src="https://tajs.qq.com/stats?sId=53685723" charset="UTF-8"></script>



<script>
    (function(h,g,c,e,f,d,b){h.alogObjectName=f;h[f]=h[f]||function(){(h[f].q=h[f].q||[]).push(arguments)};h[f].l=1*new Date();d=g.createElement(c),b=g.getElementsByTagName(c)[0];d.async=1;d.src=e;b.parentNode.insertBefore(d,b)})(window,document,"script","//wqs.jd.com/promote/quark/atlogs.2.0.min.js","ATlog");
    ATlog("init","aotu-blog-aotu.io-011",false,true,true);
</script>




    


</body>
</html>
